<template>
  <div class="filters">
    <el-row type="flex" class="filters-top" justify="space-between" align="middle">
      <el-col :span="8">
        单程：
        {{info.departCity}} - {{info.destCity}}
        /
        {{info.departDate}}
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airport" placeholder="起飞机场" @change="runFlights">
          <el-option
            v-for="(item,index) in options.airport"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="flightTimes" placeholder="起飞时间" @change="runFlights">
          <!--  from<最终的起飞时间<to value的格式自己定义，到时候筛选按照这个格式拿到value值就行 -->
          <el-option
            v-for="(item,index) in options.flightTimes"
            :key="index"
            :label="`${item.from}:00-${item.to}:00`"
            :value="`${item.from},${item.to}`"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="company" placeholder="航空公司" @change="runFlights">
          <el-option
            v-for="(item,index) in options.company"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airSize" placeholder="机型" @change="runFlights">
          <el-option
            v-for="(item,index) in sizeList"
            :key="index"
            :label="item.name"
            :value="item.size"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="filter-cancel">
      筛选：
      <el-button type="primary" round plain size="mini" @click="handleFiltersCancel">撤销</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: Object,
    info: Object,
    flights: Array
  },
  data() {
    return {
      airport: "", // 机场
      flightTimes: "", // 出发时间
      company: "", // 航空公司
      airSize: "", // 机型大小
      sizeList: [
        {
          name: "大",
          size: "L"
        },
        {
          name: "中",
          size: "M"
        },
        {
          name: "小",
          size: "S"
        }
      ]
    };
  },
  //   mounted() {
  //     console.log(this.flights);
  //   },
  methods: {
    runFlights() {
      let newList = [...this.flights];
      //   console.log(newList);
      if (this.airport) {
        newList = newList.filter(val => {
          return val.org_airport_name === this.airport; // 选择机场时候触发
        });
      }
      if (this.flightTimes) {
        newList = newList.filter(val => {
          const from = this.flightTimes.split(",")[0];
          const to = this.flightTimes.split(",")[1];
          const start = +val.dep_time.split(":")[0]; // 选择出发时间时候触发
          return start >= from && start < to;
        });
      }
      if (this.company) {
        newList = newList.filter(val => {
          return val.airline_name === this.company; // 选择航空公司时候触发
        });
      }
      if (this.airSize) {
        newList = newList.filter(val => {
          return val.plane_size === this.airSize; // 选择机型时候触发
        });
      }

      this.$emit("setDataList", newList);
    },
    // // 选择机场时候触发
    // handleAirport(value) {
    //   const newList = this.flights.filter(val => {
    //     return val.org_airport_name === value;
    //   });
    //   this.$emit("setDataList", newList);
    // },

    // // 选择出发时间时候触发
    // handleFlightTimes(value) {
    //   const from = value.split(",")[0];
    //   const to = value.split(",")[1];
    //   const newList = this.flights.filter(val => {
    //     const start = +val.dep_time.split(":")[0];
    //     return start >= from && start < to;
    //   });
    //   this.$emit("setDataList", newList);
    // },

    // // 选择航空公司时候触发
    // handleCompany(value) {
    //   const newList = this.flights.filter(val => {
    //     return val.airline_name === value;
    //   });
    //   this.$emit("setDataList", newList);
    // },

    // // 选择机型时候触发
    // handleAirSize(value) {
    //   const newList = this.flights.filter(val => {
    //     return val.plane_size === value;
    //   });
    //   this.$emit("setDataList", newList);
    // },

    // 撤销条件时候触发
    handleFiltersCancel() {
      this.airport = "";
      this.flightTimes = "";
      this.company = "";
      this.airSize = "";

      this.$emit("setDataList", this.flights);
    }
  }
};
</script>

<style scoped lang="less">
.filters {
  margin-bottom: 20px;
}

.filters-top {
  > div {
    /deep/ .el-select {
      margin-left: 10px;
    }
  }
}

.filter-cancel {
  margin-top: 10px;
}
</style>